<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3304487" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">文件</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">编辑文件</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">删除文件</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">复制文件</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">搜索文件</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">查找用户</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">添加用户</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">错误</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">手机</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">返回8</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">返回5</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">删除_填充</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe860;</span>
                <div class="name">2 系统</div>
                <div class="code-name">&amp;#xe860;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">确认2</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ba;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">性别</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81e;</span>
                <div class="name">撤销-填充</div>
                <div class="code-name">&amp;#xe81e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71e;</span>
                <div class="name">班级</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe724;</span>
                <div class="name">课程</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73f;</span>
                <div class="name">username</div>
                <div class="code-name">&amp;#xe73f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">教师</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">学生</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">信息</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">增加添加加号</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">password</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">学校</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">班级成绩-01</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">成绩</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">信息</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">验证码</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1649162852202'); /* IE9 */
  src: url('iconfont.eot?t=1649162852202#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1649162852202') format('woff'),
       url('iconfont.ttf?t=1649162852202') format('truetype'),
       url('iconfont.svg?t=1649162852202#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-wenjian"></span>
            <div class="name">
              文件
            </div>
            <div class="code-name">.icon-wenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianjiwenjian"></span>
            <div class="name">
              编辑文件
            </div>
            <div class="code-name">.icon-bianjiwenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchuwenjian"></span>
            <div class="name">
              删除文件
            </div>
            <div class="code-name">.icon-shanchuwenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuzhiwenjian"></span>
            <div class="name">
              复制文件
            </div>
            <div class="code-name">.icon-fuzhiwenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuowenjian"></span>
            <div class="name">
              搜索文件
            </div>
            <div class="code-name">.icon-sousuowenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chazhaoyonghu"></span>
            <div class="name">
              查找用户
            </div>
            <div class="code-name">.icon-chazhaoyonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjiayonghu"></span>
            <div class="name">
              添加用户
            </div>
            <div class="code-name">.icon-tianjiayonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cuowu"></span>
            <div class="name">
              错误
            </div>
            <div class="code-name">.icon-cuowu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdan"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.icon-dingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouji"></span>
            <div class="name">
              手机
            </div>
            <div class="code-name">.icon-shouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhui"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.icon-fanhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhui8"></span>
            <div class="name">
              返回8
            </div>
            <div class="code-name">.icon-fanhui8
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhui5"></span>
            <div class="name">
              返回5
            </div>
            <div class="code-name">.icon-fanhui5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchutianchong"></span>
            <div class="name">
              删除_填充
            </div>
            <div class="code-name">.icon-shanchutianchong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-2xitong"></span>
            <div class="name">
              2 系统
            </div>
            <div class="code-name">.icon-2xitong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-queren2"></span>
            <div class="name">
              确认2
            </div>
            <div class="code-name">.icon-queren2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-return"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.icon-return
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji1"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xingbie"></span>
            <div class="name">
              性别
            </div>
            <div class="code-name">.icon-xingbie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chexiao-tianchong"></span>
            <div class="name">
              撤销-填充
            </div>
            <div class="code-name">.icon-chexiao-tianchong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-banji"></span>
            <div class="name">
              班级
            </div>
            <div class="code-name">.icon-banji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kecheng"></span>
            <div class="name">
              课程
            </div>
            <div class="code-name">.icon-kecheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-username"></span>
            <div class="name">
              username
            </div>
            <div class="code-name">.icon-username
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaoshi"></span>
            <div class="name">
              教师
            </div>
            <div class="code-name">.icon-jiaoshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuesheng"></span>
            <div class="name">
              学生
            </div>
            <div class="code-name">.icon-xuesheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinxi"></span>
            <div class="name">
              信息
            </div>
            <div class="code-name">.icon-xinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zengjiatianjiajiahao"></span>
            <div class="name">
              增加添加加号
            </div>
            <div class="code-name">.icon-zengjiatianjiajiahao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-password"></span>
            <div class="name">
              password
            </div>
            <div class="code-name">.icon-password
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuexiao"></span>
            <div class="name">
              学校
            </div>
            <div class="code-name">.icon-xuexiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-banjichengji-01"></span>
            <div class="name">
              班级成绩-01
            </div>
            <div class="code-name">.icon-banjichengji-01
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chengji"></span>
            <div class="name">
              成绩
            </div>
            <div class="code-name">.icon-chengji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinxi1"></span>
            <div class="name">
              信息
            </div>
            <div class="code-name">.icon-xinxi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanzhengma"></span>
            <div class="name">
              验证码
            </div>
            <div class="code-name">.icon-yanzhengma
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjian"></use>
                </svg>
                <div class="name">文件</div>
                <div class="code-name">#icon-wenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianjiwenjian"></use>
                </svg>
                <div class="name">编辑文件</div>
                <div class="code-name">#icon-bianjiwenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchuwenjian"></use>
                </svg>
                <div class="name">删除文件</div>
                <div class="code-name">#icon-shanchuwenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuzhiwenjian"></use>
                </svg>
                <div class="name">复制文件</div>
                <div class="code-name">#icon-fuzhiwenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuowenjian"></use>
                </svg>
                <div class="name">搜索文件</div>
                <div class="code-name">#icon-sousuowenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chazhaoyonghu"></use>
                </svg>
                <div class="name">查找用户</div>
                <div class="code-name">#icon-chazhaoyonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjiayonghu"></use>
                </svg>
                <div class="name">添加用户</div>
                <div class="code-name">#icon-tianjiayonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cuowu"></use>
                </svg>
                <div class="name">错误</div>
                <div class="code-name">#icon-cuowu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#icon-dingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouji"></use>
                </svg>
                <div class="name">手机</div>
                <div class="code-name">#icon-shouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#icon-fanhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui8"></use>
                </svg>
                <div class="name">返回8</div>
                <div class="code-name">#icon-fanhui8</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui5"></use>
                </svg>
                <div class="name">返回5</div>
                <div class="code-name">#icon-fanhui5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchutianchong"></use>
                </svg>
                <div class="name">删除_填充</div>
                <div class="code-name">#icon-shanchutianchong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-2xitong"></use>
                </svg>
                <div class="name">2 系统</div>
                <div class="code-name">#icon-2xitong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-queren2"></use>
                </svg>
                <div class="name">确认2</div>
                <div class="code-name">#icon-queren2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-return"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#icon-return</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji1"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingbie"></use>
                </svg>
                <div class="name">性别</div>
                <div class="code-name">#icon-xingbie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chexiao-tianchong"></use>
                </svg>
                <div class="name">撤销-填充</div>
                <div class="code-name">#icon-chexiao-tianchong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banji"></use>
                </svg>
                <div class="name">班级</div>
                <div class="code-name">#icon-banji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kecheng"></use>
                </svg>
                <div class="name">课程</div>
                <div class="code-name">#icon-kecheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-username"></use>
                </svg>
                <div class="name">username</div>
                <div class="code-name">#icon-username</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaoshi"></use>
                </svg>
                <div class="name">教师</div>
                <div class="code-name">#icon-jiaoshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuesheng"></use>
                </svg>
                <div class="name">学生</div>
                <div class="code-name">#icon-xuesheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinxi"></use>
                </svg>
                <div class="name">信息</div>
                <div class="code-name">#icon-xinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zengjiatianjiajiahao"></use>
                </svg>
                <div class="name">增加添加加号</div>
                <div class="code-name">#icon-zengjiatianjiajiahao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-password"></use>
                </svg>
                <div class="name">password</div>
                <div class="code-name">#icon-password</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuexiao"></use>
                </svg>
                <div class="name">学校</div>
                <div class="code-name">#icon-xuexiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banjichengji-01"></use>
                </svg>
                <div class="name">班级成绩-01</div>
                <div class="code-name">#icon-banjichengji-01</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chengji"></use>
                </svg>
                <div class="name">成绩</div>
                <div class="code-name">#icon-chengji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinxi1"></use>
                </svg>
                <div class="name">信息</div>
                <div class="code-name">#icon-xinxi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanzhengma"></use>
                </svg>
                <div class="name">验证码</div>
                <div class="code-name">#icon-yanzhengma</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
